<template>
  <div class="wrap_menu">
  <el-form ref="formData" :model="formData" class="form-wrap" label-position="top" label-width="80px">
    <el-form-item :label="$t('configLazyLoad.process.nodeName')">
    <el-input v-model.trim="formData.DisplayName" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="工号不存在转向：">
    <node-select-item :curPbx="curPbx" :ToPeerType="formData.ToPeerTypeWhenEmpnoNotExist" :ToPeer="formData.ToPeerWhenEmpnoNotExist" ref="nodeSelectExist"></node-select-item>
    </el-form-item>
    <el-form-item label="座席忙转向：">
    <node-select-item :curPbx="curPbx" :ToPeerType="formData.ToPeerTypeWhenEmpnoAgentBusy" :ToPeer="formData.ToPeerWhenEmpnoAgentBusy" ref="nodeSelectBusy"></node-select-item>
    </el-form-item>
    <el-form-item label="座席未登陆转向：">
    <node-select-item :curPbx="curPbx" :ToPeerType="formData.ToPeerTypeWhenEmpnoLogoff" :ToPeer="formData.ToPeerWhenEmpnoLogoff" ref="nodeSelectLogoff"></node-select-item>
    </el-form-item>
    <el-form-item>
      <span style="font-size: 12px;color: #000;margin-right: 16px;">禁止坐席置忙时进线：</span>
      <el-radio-group v-model="formData.AgentBusy">
        <el-radio label="1">是</el-radio>
        <el-radio label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
  <div class="footer">
    <el-button class='slide-box__button' @click='cancelClick'>
    取消
    </el-button>
    <el-button class='slide-box__button' type="primary" @click='saveClick'>
    保存
    </el-button>
  </div>
  </div>
</template>
<script>
  import nodeSelectItem from '../../base/nodeSelectItem.vue'
  import {deepClone} from 'src/utils/m7Utils.js'
  export default {
    name: 'systemDeal',
    data () {
      return {
        formData: { // 自定义满意度节点
          _id: '',
          DisplayName: '',
          Exten: '',
          ToPeerTypeWhenEmpnoNotExist: '',    // 工号不存在转向类型
          ToPeerWhenEmpnoNotExist: '',        // 工号不存在转向值
          ToPeerTypeWhenEmpnoAgentBusy: '',   // 座席忙转向类型
          ToPeerWhenEmpnoAgentBusy: '',       // 座席忙转向值
          ToPeerTypeWhenEmpnoLogoff: '',      // 座席未登陆转向类型
          ToPeerWhenEmpnoLogoff: '',          // 座席未登陆转向值
          AgentBusy: '0'                       // 禁止坐席置忙时进线
        }
      }
    },
    computed: {
      curPbx () {
        return this.$store.state.config.callCenter.currentPBX
      },
      Account () {
        return this.$store.state.session.user.account
      },
      system () {
        return this.$store.state.session.ivrMap[this.curPbx].data.ivr_node_system
      }
    },
    components: {
      nodeSelectItem
    },
    props: {
      form: {
        type: Object,
        default: function () {
          return {
            _id: '',
            DisplayName: '',
            Exten: '',
            ToPeerTypeWhenEmpnoNotExist: '',    // 工号不存在转向类型
            ToPeerWhenEmpnoNotExist: '',        // 工号不存在转向值
            ToPeerTypeWhenEmpnoAgentBusy: '',   // 座席忙转向类型
            ToPeerWhenEmpnoAgentBusy: '',       // 座席忙转向值
            ToPeerTypeWhenEmpnoLogoff: '',      // 座席未登陆转向类型
            ToPeerWhenEmpnoLogoff: '',          // 工号不存在转向值
            AgentBusy: '0'                       // 禁止坐席置忙时进线
          }
        }
      }
    },
    methods: {
      initForm (obj) {
        if (!obj.AgentBusy) {
          obj.AgentBusy = '0'
        }
        this.formData = deepClone(obj)
      },
      initSelect () {
        this.formData = deepClone(this.form)
        this.$refs.nodeSelectExist.init()
        this.$refs.nodeSelectBusy.init()
        this.$refs.nodeSelectLogoff.init()
      },
      cancelClick () {
        this.$emit('cancelClick')
      },
      // 更新pbx数据
      updateVuexPbx (data) {
        let systemList = this.system
        for (let i = 0; i < systemList.length; i++) {
          if (systemList[i].Exten === data.Exten) {
            systemList[i] = data
          }
        }
        this.$store.commit('SET_IVRMAP_DETAIL', {PBX: this.curPbx, typeName: 'ivr_node_system', data: systemList || [], flag: 'data', node: this})
        this.$emit('saveClick', data)
        // this.$store.dispatch('queryVoiceMail', {Account: this.Account, PBX: this.curPbx}).then(resp => {
        //   if (resp && resp.success) {
        //     this.$store.commit('SET_IVRMAP_DETAIL', {PBX: this.curPbx, typeName: 'ivr_node_voice_mail', data: resp.list || [], flag: 'data', node: this})
        //   }
        //   this.$emit('save')
        // })
      },
      saveClick () {
        let form = deepClone(this.formData)
        form.ToPeerTypeWhenEmpnoNotExist = this.$refs.nodeSelectExist.ToPeerTypeThis
        form.ToPeerWhenEmpnoNotExist = this.$refs.nodeSelectExist.ToPeerThis
        form.ToPeerTypeWhenEmpnoAgentBusy = this.$refs.nodeSelectBusy.ToPeerTypeThis
        form.ToPeerWhenEmpnoAgentBusy = this.$refs.nodeSelectBusy.ToPeerThis
        form.ToPeerTypeWhenEmpnoLogoff = this.$refs.nodeSelectLogoff.ToPeerTypeThis
        form.ToPeerWhenEmpnoLogoff = this.$refs.nodeSelectLogoff.ToPeerThis
        form.UpdateTime && delete form.UpdateTime
        form.VarId && delete form.VarId
        form.varId && delete form.varId
        this.$store.dispatch('updateSystem', form).then((res) => {
          if (res.success) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.updateVuexPbx(res.data)
          } else {
            this.$message.error('保存失败')
          }
        })
      }
    },
    beforeMount () {
      this.initForm(this.form)
    },
    watch: {
      form (cur, old) {
        this.$refs['formData'].resetFields()
        this.initForm(cur)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .note
    margin-top 20px
    padding 0 20px
    p
      color $c-prompt
    p.two
      margin-top 10px
  .wrap_menu
    width 100%
    padding-bottom 60px
    .form-wrap
      padding 20px
  .footer
    position absolute
    bottom 0
    left 0
    width 100%
    background rgba(255,255,255,1)
    box-shadow 0px -2px 4px 0px rgba(5,49,38,0.05)
    border-top 1px solid rgba(232,232,232,1)
    display flex
    justify-content center
    padding 13px 0
    box-sizing border-box
    .slide-box__button
      padding 8px 20px 8px
      box-sizing border-box
</style>
